<template>
  <div class="scroll-wrapper">
    <van-pull-refresh
      v-model="isLoading"
      @refresh="onRefresh"
    >

      <van-list
        v-model="loading"
        :finished="finished"
        loading-text="给钱加载更快"
        finished-text="想看就打点钱"
        @load="onLoad"
      >
        <van-cell
          v-for="item in list"
          :key="item.art_id.toString()"
          :title="item.title"
          @click="$router.push('/article/'+item.art_id.toString())"
        >
          <div slot="label">
            <van-grid :column-num="item.cover.images.length">
              <van-grid-item
                v-for="(value, idx) in item.cover.images"
                :key="idx"
              >
                <van-image
                  lazy-load
                  :src="value"
                />
              </van-grid-item>
            </van-grid>
            <div class="foot">
              <span>{{item.aut_name}}</span>
              <span>{{item.comm_count}}评论</span>
              <span>{{item.pubdate | timeFilter}}</span>
              <span
                class="closebutton"
                v-if="$store.state.tokenInfo.token"
                @click="hRemoveArticle(item)"
              >
                <van-icon name="cross" />
              </span>
            </div>
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
    <van-popup
      v-model="popShow"
      style="width:80%"
    >
      <more-action
        ref="refMoreAction"
        @user-report="hUserReport"
        @user-dislike="hUserDislike"
      ></more-action>
    </van-popup>
  </div>
</template>
<script>
import { getArticle, uninterested, userReport } from '../../api/article.js'
import moreAction from './moreAction.vue'
export default {
  name: 'ArticleList',
  props: ['channel'],
  data () {
    return {
      articleId: '',
      popShow: false,
      isLoading: false,
      list: [],
      timestamp: Date.now(),
      loading: false,
      finished: false
    }
  },
  components: {
    moreAction
  },
  methods: {
    // 更多操作点击弹窗 ‘不感兴趣’
    async hUserDislike () {
      console.log(123)
      try {
        // 发送请求
        const res = await uninterested(this.articleId)
        console.log(res)
        // 删除文章
        this.delArticle(this.articleId)
        // 关闭弹窗
        this.popShow = false
        this.$toast.success('操作成功')
      } catch (err) {
        console.log(err)
        this.$toast.fail('操作失败')
      }
    },
    // 用户举报
    async hUserReport (reportId) {
      try {
        const res = await userReport(this.articleId, reportId)
        console.log('report', res)
        this.delArticle(this.articleId)
        this.popShow = false
        this.$toast.success('操作成功')
      } catch (err) {
        console.log(err)
        this.$toast.fail('操作失败')
      }
    },
    // 删除对应文章
    delArticle (articleId) {
      // array.findIndex来判断list中是否有和当前点击文章id相同的数组元素，如果有则splice掉
      const idx = this.list.findIndex(article =>
        article.art_id.toString() === articleId)
      if (idx !== -1) {
        this.list.splice(idx, 1)
      }
    },
    // 点击X号获取文章的ID，将获取到的id保存
    hRemoveArticle (article) {
      this.popShow = true
      // console.log('id', article.art_id.toString())
      this.articleId = article.art_id.toString()
      // console.log('refs', this.$refs.refMoreAction.show)
      // 将moreAction页面进行重置
      // 第一次创建弹窗时无show,要if一下
      if (this.$refs.refMoreAction) {
        this.$refs.refMoreAction.show = false
      }
    },
    // 下拉重新加载
    async onRefresh () {
      const res = await getArticle(this.channel.id, Date.now())
      // console.log('mmm', res)
      this.list.unshift(...res.data.data.results)
      // this.timestamp = Date.now()
      this.isLoading = false
    },
    // 文章加载
    async onLoad () {
      const res = await getArticle(this.channel.id, this.timestamp)
      console.log('mmm', res)
      this.list.push(...res.data.data.results)
      this.timestamp = res.data.data.pre_timestamp
      this.loading = false
      if (res.data.data.results.length === 0) {
        this.finished = true
      }
    }
  }
}
</script>

<style lang="less" scoped>
.foot {
  span {
    margin-right: 10px;
  }
}
.closebutton {
  float: right;
}
</style>
